<template>
  <dl>
    <dt class="fs40 pb20 fw-b">默认样式</dt>
    <dd class="pb20">
      <p>{{ input }}</p>
      <t-input v-model="input" type="text" />
    </dd>
    <dd>
      <p>{{ input }}</p>
      <t-input v-model="input" type="text" radius />
    </dd>
    <dd class="mt20">
      <pre v-highlight="defaultInput"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">最大 | 最小 | 整数</dt>
    <dd class="pb20">
      <p>{{ max }}</p>
      <t-input v-model="max" type="number" max="99" />
    </dd>
    <dd class="pb20">
      <p>{{ min }}</p>
      <t-input v-model="min" type="number" min="30" />
    </dd>
    <dd class="pb20">
      <p>{{ int }}</p>
      <t-input v-model="int" type="number" integer />
    </dd>
    <dd class="mt20">
      <pre v-highlight="numberInput"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">输入长度</dt>
    <dd class="pb20">
      <p>{{ len }}</p>
      <t-input v-model="len" type="text" length="10" />
    </dd>
    <dd class="mt20">
      <pre v-highlight="lengthInput"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">icon</dt>
    <dd class="pb20">
      <t-input v-model="icon" type="text" left-icon="icon-search" />
    </dd>
    <dd class="pb20">
      <t-input v-model="icon" type="text" right-icon="icon-search" />
    </dd>
    <dd class="pb20">
      <t-input v-model="icon" type="text">
        <template #left>
          <img class="w40 h40" src="@/assets/logo.png" alt="logo">
        </template>
      </t-input>
    </dd>
    <dd class="pb20">
      <t-input v-model="icon" type="text">
        <template #right>
          <img class="w40 h40" src="@/assets/logo.png" alt="logo">
        </template>
      </t-input>
    </dd>
    <dd class="mt20">
      <pre v-highlight="iconInput"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">验证码</dt>
    <dd class="pb20">
      <t-input v-model="code" type="text" code :before-send="beforeSend" />
    </dd>
    <dd class="mt20">
      <pre v-highlight="codeInput"><code></code></pre>
    </dd>
  </dl>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TMessage } from '@/base/directive/TMessage/globalMessage'
import type { TInputBeforeSendParams } from '@/base/types/components'

const input = ref('')
const max = ref('')
const min = ref('')
const int = ref('')
const len = ref('')
const icon = ref('')
const code = ref('')

const beforeSend: TInputBeforeSendParams = (done) => {
  setTimeout(() => {
    const off = Math.random() > 0.5
    TMessage({
      type: off ? 'success' : 'warning',
      message: off ? '发送成功' : '发送失败'
    })
    done(off)
  }, 1000)
}


const defaultInput = `<p>{{ input }}</p>
<t-input v-model="input" type="text" />`
const numberInput = `<dd class="pb20">
  <p>{{ max }}</p>
  <t-input v-model="max" type="number" max="99" />
</dd>
<dd class="pb20">
  <p>{{ min }}</p>
  <t-input v-model="min" type="number" min="30" />
</dd>
<dd class="pb20">
  <p>{{ int }}</p>
  <t-input v-model="int" type="number" integer />
</dd>`
const lengthInput = `<p>{{ len }}</p>
<t-input v-model="len" type="text" length="10" />`
const iconInput = `<dd class="pb20">
  <t-input v-model="icon" type="text" left-icon="icon-search" />
</dd>
<dd class="pb20">
  <t-input v-model="icon" type="text" right-icon="icon-search" />
</dd>
<dd class="pb20">
  <t-input v-model="icon" type="text">
    <template #left>
      <img class="w40 h40" src="@/assets/logo.png" alt="logo">
    </template>
  </t-input>
</dd>
<dd class="pb20">
  <t-input v-model="icon" type="text">
    <template #right>
      <img class="w40 h40" src="@/assets/logo.png" alt="logo">
    </template>
  </t-input>
</dd>`
const codeInput = `<t-input v-model="code" type="text" code :before-send="beforeSend" />

import { TMessage } from '@/base/directive/TMessage/globalMessage'
import type { TInputBeforeSendParams } from '@/base/types/components'
const beforeSend: TInputBeforeSendParams = (done) => {
  setTimeout(() => {
    const off = Math.random() > 0.5
    TMessage({
      type: off ? 'success' : 'warning',
      message: off ? '发送成功' : '发送失败'
    })
    done(off)
  }, 1000)
}`
</script>

<style scoped lang="scss">

</style>
